<template>
  <ElImageViewer v-if="show" v-bind="getBindValue" @close="close"/>
</template>

<script lang="ts" setup>
import { computed, PropType, ref } from 'vue'

defineOptions({name: 'ImageViewer'})

const props = defineProps({
  /**
   * @description preview link list.
   */
  urlList: {
    type: Array as PropType<string[]>,
    default: (): string[] => []
  },
  /**
   * @description preview backdrop z-index.
   */
  zIndex: {
    type: Number,
  },
  /**
   * @description the initial preview image index, less than or equal to the length of `url-list`.
   */
  initialIndex: {
    type: Number,
    default: 0,
  },
  /**
   * @description whether preview is infinite.
   */
  infinite: {
    type: Boolean,
    default: true,
  },
  /**
   * @description whether user can emit close event when clicking backdrop.
   */
  hideOnClickModal: Boolean,
  /**
   * @description whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.
   */
  teleported: Boolean,
  /**
   * @description whether the image-viewer can be closed by pressing ESC.
   */
  closeOnPressEscape: {
    type: Boolean,
    default: true,
  },
  /**
   * @description the zoom rate of the image viewer zoom event.
   */
  zoomRate: {
    type: Number,
    default: 1.2,
  },
  /**
   * @description the min scale of the image viewer zoom event.
   */
  minScale: {
    type: Number,
    default: 0.2,
  },
  /**
   * @description the max scale of the image viewer zoom event.
   */
  maxScale: {
    type: Number,
    default: 7,
  },
  show: {
    type: Boolean,
    default: true,
  },
})

const getBindValue = computed(() => {
  const propsData: Recordable = {...props}
  delete propsData.show
  return propsData
})

const show = ref(props.show)

const close = () => {
  show.value = false
  document.getElementById('image-viewer-container')?.remove();
}
</script>
